<template>
  <div :class="['message-text-container']">
    <span
      v-for="(item, index) in textMessageData.text"
      :key="index"
    >
      <span
        v-if="item.name === 'text' && enableURLDetection === 1"
        class="text"
        v-html="item.text"
      >
      </span>
      <span
        v-else-if="item.name === 'text'"
        class="text">{{ item.text }}
      </span>
      <img
        v-else
        class="emoji"
        :src="item.src"
        :alt="item.emojiKey"
      >
    </span>
  </div>
</template>

<script lang="ts" setup>
import vue from '../../../../adapter-vue';
import {
  CUSTOM_BASIC_EMOJI_URL,
  CUSTOM_BASIC_EMOJI_URL_MAPPING,
} from '../../emoji-config';
import state from '../../../../utils/state.js';
const { ref, computed } = vue;
interface IProps {
  content: Record<string, any>;
  flow: string;
}
const props = withDefaults(defineProps<IProps>(), {
  content: () => ({}),
  flow: 'in',
});
const enableURLDetection = ref(state.get('enableURLDetection'));
const linkColor = computed(() => {
  return props.flow === 'out' ? '#fff' : '#0052d9';
});
const textMessageData = computed(() => {
  const contentCopy = JSON.parse(JSON.stringify(props.content));
  contentCopy.text?.forEach(
      (item: {
        name: string;
        text?: string;
        src?: string;
        type?: string;
        emojiKey?: string;
      }) => {
        if (item.name === 'img' && item?.type === 'custom') {
          if (!CUSTOM_BASIC_EMOJI_URL) {
            console.warn('CUSTOM_BASIC_EMOJI_URL is required for custom emoji, please check your CUSTOM_BASIC_EMOJI_URL.');
          } else if (!item.emojiKey || !CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey]) {
            console.warn('emojiKey is required for custom emoji, please check your emojiKey.',);
          } else {
            item.src = CUSTOM_BASIC_EMOJI_URL + CUSTOM_BASIC_EMOJI_URL_MAPPING[item.emojiKey];
          }
        } else if (item.name === 'text' && enableURLDetection.value) {
          item.text = item.text.replace(/https?:\/\/[\w\-./?=&:#]+(?=[^\w\-./?=&:#]|$)/g, (url) => {
            return `<a href="${url}" target="_blank" rel="noopener noreferrer" class="message-text-link" style="color: ${linkColor.value}; text-decoration: underline;">${url}</a>`;
          }) || '';
        }
      },
  );
  return contentCopy;
});
</script>
<style lang="scss" scoped>
.message-text-container {
  display: inline;
}

.text-select {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.emoji {
  vertical-align: bottom;
  width: 20px;
  height: 20px;
}

.text {
  white-space: pre-wrap;
  font-size: 14px;
  text-size-adjust: none;
  overflow-wrap: break-word;
  word-break: normal;
}
</style>
